<template>
    <div class="table_wrapper">
        <div class="my_search">
            <div class="search_item">
                <el-input v-model.trim="searchParam.roleName" size="mini" placeholder="角色名称"></el-input>
            </div>
            <div class="search_item">
                <el-button class="searchBtn" type="primary" @click="search" size="mini">搜索</el-button>
            </div>
            <div class="search_item">
                <el-button type="info" @click="clearSearch" size="mini">重置</el-button>
            </div>
        </div>
        <div class="my_table_ctr">
            <div class="my_table_ctr_left">
                <el-button type="primary" @click="add" size="mini">添加</el-button>
                <!--<el-button type="primary" v-permission="'role:test'"  size="mini">测试</el-button>-->
            </div>
            <div class="my_table_ctr_right">
                <el-button type="info" icon="el-icon-refresh" @click="refresh" size="mini"></el-button>
            </div>
        </div>
        <div class="my_table_data">
            <el-table  :data="tableData"
                       size="mini"
                       :border="true"
                       :stripe="true"
                       :highlight-current-row="true"
                       @selection-change="selectChange"
                       ref="table"
                       @sort-change="sortChange"
                       v-loading="loading">

                <el-table-column
                        type="index">
                </el-table-column>
                <el-table-column prop="roleName" label="角色名称">
                </el-table-column>

                <el-table-column label="操作" width="200px" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="auth(scope.row)">授权</el-button>
                        <el-button
                                size="mini"
                                plain
                                @click="handleEdit(scope.row)" icon="fa fa-edit "></el-button>
                        <el-button
                                size="mini"
                                plain
                                type="danger"
                                @click="handleDelete(scope.row)"
                                icon="fa fa-trash"></el-button>


                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="m_footer">

            <el-pagination
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageParam.size"
                    background
                    layout="prev, pager, next,jumper,sizes, ->, total"
                    :total="pageTotal"
                    :current-page="pageParam.page"
                    @current-change="curChange"
                    @size-change="sizeChange">
            </el-pagination>
        </div>
        <save ref="save" @refresh="refresh"></save>
        <authority ref="authority"></authority>
    </div>
</template>

<script>
    import curdMixins from '../../../common/mixins/curdMixins'
    import save from './save/save'
    import authority from './authority/authority'
    import {selectPage,deleteById} from "../../../api/base/role";

    export default {
        name: "role",
        mixins:[curdMixins],
        components:{
            save,
            authority
        },
        data(){
            return{

            }
        },
        methods:{
            getList(param){
                return selectPage(param)
            },
            delete(data) {
                return deleteById(data);
            },
            auth(data){
                this.$refs.authority.setData(data)
            }
        }

    }
</script>

<style scoped lang="sass">
    @import "../../../styles/table"
</style>
